<template>
  <div>
    <div class="list-btn">
      姓名:<Input v-model.trim="params.realname" placeholder="请输入姓名" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      手机号:<Input v-model.trim="params.phone" placeholder="请输入手机号" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      反馈时间:<DatePicker type="date" @on-change="startTime"  placeholder="选择开始时间" style="width: 200px"></DatePicker>
      ～<DatePicker type="date" @on-change="endTime"  placeholder="选择结束时间" style="width: 200px" ></DatePicker>
    </div>
     <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.pageCurrent = $event; getList(url)" @changePageSize="params.pageLimit = $event; getList(url)"></page-button>
  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import confirmDialog from '../../template/confirmDialogTemplate'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
      confirmDialog
    },
    data () {
      return {
        tag: {
          'title': '用户反馈',
          'path': '/work/user/feedback'
        },
        listTitle: [
          {
            title: '手机号',
            key: 'phone',
            align:'center',
            minWidth:120,
            render: (h, params) => {
              let phone = params.row.phone;
              return h('div', `${phone.substr(0,3)}****${phone.substr(7)}`)
            }
          },
          {
            title: '姓名',
            key: 'realname',
            align:'center',
            minWidth:100,
            render: (h,params) =>{
              let time = params.row.realname ?  params.row.realname :'—';
              return h('div',time)
            }
          },
          {
            title: '反馈时间',
            key: 'createTime',
            align:'center',
            minWidth:180,
            render: (h,params) =>{
              let time = this.getLocalTime(params.row.createTime);
              return h('div',time)
            }
          },
          {
            title: '反馈内容',
            key: 'suggest',
            align:'left',
            minWidth:200,
             render: (h,params) =>{
              let type='—'
              switch(params.row.type){
                case 1:
                  type= '审核进度';
                  break;
                case 2:
                  type= '流程繁琐';
                  break;
                  case 3:
                  type= '使用体验';
                  break;
                case 4:
                  type= '视觉感受';
                  break;
                case 5:
                  type= '其他';
                  break;

              }
              return h('div',type+'：'+params.row.suggest)

            }

          },
        ],
        url: 'suggest/list',
        nameListUrl: '',
        type:'',
        phone:'',
        params: {
          pageCurrent: 1,
          pageLimit: 10
        },
      }
    },
    watch:{
      type(newType,oldType){
        console.log(newType);
      },
      phone(newphone,oldphone){
        console.log(newphone);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }

</style>
